<template>
	<div id="app" class="weui-tab">
		<div class="weui-tab__bd">
			<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
				<header class="demos-header"><span class="header-title">户表缴费</span></header>
				<div class="weui-form-preview">
					<div class="weui-form-preview__hd"><label class="weui-form-preview__label">余额</label><em
							class="weui-form-preview__value">¥{{info.balance}} 元</em></div>
					<div class="weui-form-preview__bd">
						<div class="weui-form-preview__item"><label class="weui-form-preview__label">户号</label><span
								class="weui-form-preview__value">{{info.number}}</span></div>
						<div class="weui-form-preview__item"><label class="weui-form-preview__label">户名</label><span
								class="weui-form-preview__value">{{info.customerName}}</span></div>
						<div class="weui-form-preview__item"><label class="weui-form-preview__label">读数</label><span
								class="weui-form-preview__value">{{info.lastReading}}</span></div>
						<div class="weui-form-preview__item"><label class="weui-form-preview__label">抄表时间</label><span
								class="weui-form-preview__value">{{info.lastReadingTime}}</span></div>
						<!---->
						<div class="weui-form-preview__item"><label class="weui-form-preview__label">地址</label><span
								class="weui-form-preview__value">{{info.contactAddress}}</span></div>
						<div class="weui-form-preview__item"><label class="weui-form-preview__label">表号</label><span
								class="weui-form-preview__value">{{info.meterNumber}}</span></div>
						<div class="weui-form-preview__item" style="display: none;"><label
								class="weui-form-preview__label">本期已购水量</label><span
								class="weui-form-preview__value">0</span></div>
						<div class="weui-form-preview__item" style="display: none;"><label
								class="weui-form-preview__label">所处阶梯</label><span
								class="weui-form-preview__value">1</span></div>
						<div class="weui-form-preview__item" style="display: none;"><label
								class="weui-form-preview__label">购买水量</label><span
								class="weui-form-preview__value">
								<input class="uni-input" type="text" style="height: 24px;"/></span>
						</div>
						<div class="weui-form-preview__item"><label class="weui-form-preview__label">缴费金额</label><span
								class="weui-form-preview__value">
								<input class="uni-input" type="text" v-model="amount" placeholder="请输入缴费金额" style="height: 24px;border:1px solid #ccc;width: 150px;"/></span>
						</div>
					</div>
					<div class="weui-btn-area">
						<a href="javascript:" class="weui-btn weui-btn_primary" @click="doCharge">立即缴费</a>
					</div>
					<div class="weui-btn-area">
						<a href="javascript:" class="weui-btn weui-btn_warn" @click="unBind">解除绑定</a></div>
				</div><br><br>
			</div>
		</div>
		<div class="weui-tabbar">
			<navigator url="/pages/index/index" class="weui-tabbar__item weui-bar__item--on router-link-active">
				<div class="weui-tabbar__icon"><img src="static/home-logo.png" alt=""></div>
				<p class="weui-tabbar__label">首页</p>
			</navigator>
		</div>
	</div>
</template>

<script>
	import config from '@/common/config.js';
	export default {
		data() {
			return {
				info:{},
				amount:'',
				index:0
			}
		},
		onLoad(params) {
			//this.info=this.$request.params;
			//这个是从连接点进来没有登录的情况
			if(!uni.getStorageSync("userListhcmh")){
				uni.showLoading({
					title:"加载中..."
				})
				let _this=this
				this.$util.checkLogin(function(token){
					_this.$request.getUserList(token,function(list){
						_this.getInfo(params);
					})
				})
			}else{
				this.getInfo(params);
			}
		},
		
		methods: {
			getInfo(params){
				if(params.index){
					this.index=params.index;
					this.info=uni.getStorageSync("userListhcmh")[this.index];
				}
				if(params.meterNumber){
					uni.getStorageSync("userListhcmh").forEach(item => {
						if(item.meterNumber == params.meterNumber){
							this.info = item
						}
					})
					if(this.info.meterId === undefined){
						this.$util.tips("水表已被删除","/pages/charge/index")
					}
				}
			},
			doCharge(){
				var _this=this;
				if(!this.amount){
					this.$util.tips('请输入缴费金额');
					return false;
				}
				var posPattern = /^\d+$/;
				if(!posPattern.test(this.amount)){
					this.$util.tips('缴费金额必须为整数');
					return false;
				}
				
				if(!this.info.meterId || this.info.meterId==undefined){
					this.$util.tips('水表的信息出错，请退出充值界面重新进入');
					return false;
				}
				

				let url='payment/wechat/createOrder',postData={};
				postData={
					totalFee:parseFloat(this.amount)*100,
					openid:uni.getStorageSync("tokenhcmh"),
					attach:this.info.meterId,
					body:config.appid,
				}
				this.$request.post(url,postData).then(res=>{
					// #ifdef H5
						this.$jweixin.wxPay(res,function(result){
							console.log(result)
							uni.showToast({
								title:"支付成功"
							})
							setTimeout(function(){
								_this.$request.getUserList(uni.getStorageSync("tokenhcmh"),function(list){
									_this.info=list[_this.index]
								})
							},2000)
						});
					// #endif
					return false;
				})
			},
			
			unBind(){
				this.$request.post('wechat/unbindCustomer',{
					customer_id:this.info.customerId,
					code:uni.getStorageSync("tokenhcmh")
				}).then(res=>{
					this.$util.tips("解绑成功","/pages/charge/index")
				})
				
			},
			
		}
	}
</script>

<style>
	.uni-input{
		float: right;
		border:1px solid #eee;
		font-size: 14px;
	}

</style>
